<template>
	<view>
		<view>
			<table-title content="停车卡办理列表"></table-title>
			<view class="choice-bar">
				<view class="nav-choice" :class="isActive[index]" v-for="(value,index) in navChoice" :key="index"
					@click="changeActive(index)">{{value}}</view>
			</view>
			<application-record v-for="(item,index) in recordList" :key="index"
				:company="item.title" :building="item.building" :time="item.time"
				:goods="item.outline" :state="item.state" @getClick="checkDetails(item.orderNum,item.status)"></application-record>
			<view v-show="isLoadMore">
			  	<uni-load-more :status="loadStatus" ></uni-load-more>
			</view>
		</view>
		<uni-popup ref="popup" backgroundColor="#f0f0f0" type="center">
			<scroll-view scroll-y="true" style="height: 1000rpx;width: 750rpx;background-color: #f0f0f0;margin-top: 20rpx;margin-bottom: 10rpx;" scroll-with-animation="true">
				<ruleDisplay :htmlStr="roleInfo" @getClick="closePop"></ruleDisplay>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrderList,
		syncRuleInfo,
	} from "../../..//util/network.js"
	export default{
		data() {
			return {
				token:'',
				choosedState: '待确认',
				navChoice: ['待确认','办理中','已办结','已驳回','全部'],
				isActive: ['active-choice','nav-choice','nav-choice','nav-choice','nav-choice'],
				activeIndex: 0,
				userInfo:'',         //用户账号
				recordList:[],     //工单列表，eg:  见下方 recordListTestCase
				pageNo:1,
				pageSize:10,
				states:[2],
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				roleInfo:'',
			}
		},
		
		onNavigationBarButtonTap(){
			console.log("[info]","导航栏按钮触发监听")
			// this.$refs.popup.open('center')
			let url = '../parkingCardApplication/details/details?state=待申请' + '&state=待申请'
			
			uni.navigateTo({
				url:'../../ruleDisplay/ruleDisplay?url=' + url + '&htmlStr=' + encodeURIComponent(this.roleInfo)
			})
			// uni.navigateTo({
			// 	url:'@/pages/accessCardApplication/details/details?id=待分配' + '&state=' + '待申请'
			// })
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.isLoadMore=true
				this.pageNo+=1
				this.getOrderByState('物品放行办理类',this.states)
			}
		},
		methods: {
			closePop(){
				this.$refs.popup.close()
				uni.navigateTo({
					url:'../details/details?id=待分配' + '&state=' + '待申请'
				})
			},
			/*
			功能：根据单号展示工单详细页面
			参数：
			orderNum：工单号
			state：工单当前状态
		    */
			checkDetails(orderNum,state) {
				uni.navigateTo({
					url:'../details/details?id=' + orderNum + '&state=' + state
				})
			},
			
			/*
			功能：根据菜单栏选择的不同状态，渲染当前视图，并根据状态实时查询工单列表
			参数：
			*/
			changeActive(e) {
				this.pageNo = 1
				this.pageSize = 10
				if(e!==this.activeIndex){
					let tmp = [...this.isActive]
					tmp[e] = 'active-choice'
					tmp[this.activeIndex] = 'nav-choice'
					this.activeIndex = e
					this.isActive = tmp
					this.choosedState = this.navChoice[this.activeIndex]
				}
				console.log("info","在此处调接口，根据choosedStat，重载recordList数组")
				switch(this.choosedState) {
				     case "待确认":
						this.states = [2]
				        break;
				     case "办理中":
						this.states = [0,1,3]
				        break;
					 case "已办结":
						this.states = [5]
					    break;
					 case "已驳回":
						this.states = [4]
					    break;
					 case "全部":
						this.states = [0,1,2,3,4,5]
					    break;
				     default:
				        itemTmp.state = "全部"
				} 
				this.recordList=[]
				if(!this.isLoadMore){
					this.isLoadMore=true
					this.loadStatus='loading'
					this.getOrderByState('detail',this.states)
				}
			},
			
			/*
			功能：根据工单类别及状态实时查询工单列表
			参数：
			orderType：工单类别
			state：工单当前状态
		    */
		   listPush(item){
		   	let itemTmp = {'orderNum':'','title':'停车卡','building':'','time':'',
		   	'outline':'','status':-1, 'state':''}
		   	itemTmp.orderNum = item.id
		   	itemTmp.time = item.updateTime.replace('T',' ')
			if(item.price == 0){
				itemTmp.outline ='其它类型车位'
			}else{
				itemTmp.outline ='办理费用: ' + item.price + "元"
			}
		   	itemTmp.status = item.status
		   	switch(item.status) {
				  case 0:
					 itemTmp.state = "待管家审核"
					 break;
				  case 1:
					 itemTmp.state = "待管家上传"
					 break;
				 case 2:
					 itemTmp.state = "待用户上传"
					break;
				 case 3:
					 itemTmp.state = "待管家办结"
					break;
				 case 4:
					 itemTmp.state = "已驳回申请"
					break;
				case 5:
					itemTmp.state = "已办结"
				   break;
		   	     default:
		   	        itemTmp.state = "全部"
		   	} 
		   	this.recordList.push(itemTmp)
		   	
		   },
			getOrderByState(orderType,state){
				let a = syncGetOrderList("parking-space/list", state, this.pageNo, this.pageSize)
				 a.then((res)=>{
					 if(res.data.code == 200){
						for (var i = 0; i < res.data.data.parkingSpaceList.length; i++) {
							this.listPush(res.data.data.parkingSpaceList[i])
						}
						if(res.data.data.parkingSpaceList.length <= 0){
							this.isLoadMore = false
						}else{
							this.isLoadMore = false
							this.loadStatus = 'nomore'
						}
					}else {
						this.isLoadMore = false
						uniRedirect('/login/login')
						console.log("[info]","请求失败请检查网络情况")
					}
				})
			}
		},
		//初始化加载页面（待确认页面）
		mounted() {
			console.log("[info]","测试初始化" + uni.getStorageSync('userinfo'))
			if(uni.getStorageSync('userinfo') != ""){
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
			let rule = syncRuleInfo(3)
			rule.then((res) => {
				console.log(res)
				this.roleInfo = res.data.data.text
			})

		},
		onShow() {
			if(!this.isLoadMore){
				this.isLoadMore = true
				this.pageNo = 1
				this.pageSize = 10
				this.recordList=[]
				this.getOrderByState('onShow',this.states)
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.nav-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: solid 5rpx #F1F1F1;
	}
	.choice-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:center;
		color: #808080;
	}
	.active-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight:600;
		color: #DD524D;
		border-bottom: solid 5rpx #DD524D;
	}
	::-webkit-scrollbar {
		display:none;
		width:0;
		height:0;
		color:transparent;
	}
</style>
